<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="showMerchants.css" type="text/css" />

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="margin-top: 50px; margin-bottom: 100px;">
    <div id="table_container">
        <div id="categories">
            <c:forEach items="${categoriesList }" var="type">
                <button class="btn btn-primary" id="${type.id }">${type.type }</button>
            </c:forEach>
        </div>
        <div>
            <table class="table table-bordered table-hover" id="tableId">
                <thead>
                <tr>
                    <th class="title_td">商家头像</th>
                    <th class="title_td">商家名字</th>
                    <th class="title_td">商家地址</th>
                </tr>
                </thead>
                <tbody id="tbodyId">
                <c:forEach items="${pageBean.recordList}" var="merchant">
                    <tr>
                        <td>
                            <a href="showFoodList?m_id=${merchant.id }&m_name=${merchant.name }">
                                <img src="${merchant.avatar }" style="width:100px; height:100px">
                            </a>
                        </td>
                        <td><a href="showFoodList?m_id=${merchant.id }&m_name=${merchant.name }">${merchant.name }</a>
                        </td>
                        <td>${merchant.address }</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="application/javascript" src="showMerchants.js"></script>

</body>
</html>